<template>
	<div style="position: relative;">
		<!--权限编辑界面-->
		<el-drawer :modal="false" style="position:absolute;"  v-if="drawerVisible"  size="100%" :visible.sync="drawerVisible" onload direction="btt"
			:modal-append-to-body="false">
			<!--弹窗标题-->
			<div slot="title" style="display: flex;">
				<div style="width: 60px;">
					<el-button icon="el-icon-back" type="text" @click="drawerVisible=false">返回</el-button>
				</div>
				<div style="padding: 5px; margin-right: 20px;">|</div>
				<div style="text-align: center;font-size: 15px; font-weight: bold;padding-top:2px;">
					编辑角色
				</div>
			</div>
			
			<div style="margin: 0px 20px; height: 98%;">
				<!--弹窗主体内容-->
				<iframe  ref="editFrame" :src="'/admin/auth/role_edit?roleid='+curFormData.roleid+'&index='+currentEditIndex" width="100%" height="100%" frameborder="0"></iframe>
			</div>
		</el-drawer>
		<div class="section-panel">
			<div>
				<el-button type="primary" icon="el-icon-plus">添加角色</el-button>
			</div>
		</div>
		
		
		
		
		<div class="section-panel mt10">
			<div style="height:calc(100vh - 160px); padding-bottom:40px; box-sizing: border-box">
				<el-table  :data="tableData" height="100%">
					<el-table-column type="selection" width="80px" align="center"></el-table-column>
					<el-table-column type="index" width="80px" label="ID"></el-table-column>
					<el-table-column label="角色名称" prop="rolename" width="150px"></el-table-column>
					<el-table-column label="角色描述" prop="desc"></el-table-column>
					<el-table-column label="状态" prop="status">
						<template v-slot="scope">
							<div v-if="scope.row.enable==1" style="display: flex; align-content: center; justify-items: center;"> 
								<div style="margin-top:5px;width:10px; background-color: #00aa00;border-radius: 10px;height:10px;"></div>
								<div style="margin-left: 2px; color:#00aa00;">启用</div>
							</div>
							<div v-if="scope.row.enable==0" style="display: flex; align-content: center; justify-items: center;">
								<div style="margin-top:5px;width:10px; background-color: #ff5500;border-radius: 10px;height:10px;"></div>
								<div style="margin-left: 2px; color:#ff5500;">禁用</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200px" align="center">
						<template v-slot="scope">
							<el-button-group>
								<el-button icon="el-icon-edit-outline" type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
								<el-button icon="el-icon-delete" type="danger">删除</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>

				<div class="flex" style="line-height: 40px;">
					<div class="flex1">
						
					</div>
					<div style="color: #888;">
						共{{tableData.length}}条记录
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import http from '@/utils/http';
	export default {
		data() {
			return {
				currentEditIndex:-1,
				curFormData:{},
				drawerVisible:false,
				tableData: []
			}
		},
		mounted() {
			this.loadDataList();
			window.addEventListener("message",this.handleiframeCallback)
		},
		methods:{
			handleEdit(index,data){
				this.currentEditIndex=index;
				this.curFormData=JSON.parse(JSON.stringify(data));
				this.$nextTick(()=>{
					this.drawerVisible=true;
				})
				
			},
			loadDataList(){
				const params = {
					nickname:''
				}
				http.post("/api/admin/roles/list_by_page", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.tableData=res.data.list;
					}
				}).catch(error => {})
			},
			handleiframeCallback(event){
				if(event.data=="closedrawer"){
					this.drawerVisible=false;
					this.loadDataList();
				}
			}
		}
	}
</script>

<style scoped>
	iframe{
		border:none;
	}
</style>